<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>大学生学习RuoYi框架</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style>
        body {
            height: auto;
            background: url(../img/login-background.jpg) no-repeat center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            color: rgba(255, 255, 255, 0.7);
        }
        .welcome-panel {
            background-color: rgba(0, 0, 0, 0);
            border-radius: 5px;
            box-shadow: none;
            padding: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
            border: none;
        }
        .welcome-title {
            text-align: center;
            font-weight: 600;
            color: rgba(77, 184, 255, 0.8);
            margin-bottom: 20px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            font-size: 28px;
        }
        .student-info {
            border-left: 3px solid rgba(77, 184, 255, 0.5);
            padding-left: 15px;
            margin-bottom: 20px;
            background-color: rgba(0, 0, 0, 0);
            padding: 10px 15px;
            border-radius: 0 5px 5px 0;
        }
        .feature-box {
            background-color: rgba(0, 0, 0, 0);
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            height: 100%;
            box-shadow: none;
            border: none;
        }
        .feature-title {
            color: rgba(77, 184, 255, 0.8);
            font-weight: 600;
            border-bottom: 1px solid rgba(77, 184, 255, 0.3);
            padding-bottom: 10px;
            margin-bottom: 15px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
        .bg-image-note {
            background-color: rgba(0, 0, 0, 0);
            border: 1px dashed rgba(77, 184, 255, 0.4);
            padding: 15px;
            margin-top: 20px;
            text-align: center;
            border-radius: 5px;
        }
        .study-progress {
            margin-bottom: 20px;
        }
        .progress {
            margin-bottom: 10px;
            height: 18px;
            background-color: rgba(255, 255, 255, 0.1);
        }
        .progress-bar {
            opacity: 0.8;
        }
        .footer {
            text-align: center;
            padding: 15px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            background-color: rgba(0, 0, 0, 0);
            border-radius: 5px;
            border: none;
            margin-top: 20px;
        }
        ul, ol {
            background-color: rgba(0, 0, 0, 0);
            padding: 10px 10px 10px 30px;
            border-radius: 5px;
        }
        li, p {
            font-weight: 400;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
        strong {
            color: rgba(77, 184, 255, 0.8);
            font-weight: 600;
        }
        a {
            color: rgba(77, 184, 255, 0.8);
            font-weight: 600;
            text-decoration: none;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
        a:hover {
            color: rgba(128, 204, 255, 0.9);
            text-decoration: none;
        }
        code {
            background-color: rgba(0, 0, 0, 0);
            color: rgba(77, 184, 255, 0.8);
            font-weight: 400;
            border: none;
        }
        h4 {
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
        .fa {
            color: rgba(77, 184, 255, 0.8);
            margin-right: 5px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="container">
        <div class="welcome-panel">
            <h2 class="welcome-title">大学生RuoYi框架学习平台</h2>
            
            <div class="row">
                <div class="col-md-4">
                    <div class="student-info">
                        <h4><i class="fa fa-user"></i> 学生信息</h4>
                        <p><strong>姓名：</strong>李飞</p>
                        <p><strong>学习阶段：</strong>RuoYi框架入门</p>
                        <p><strong>开始时间：</strong>2025年2月1日</p>
                    </div>
                    
                    <div class="study-progress">
                        <h4><i class="fa fa-tasks"></i> 学习进度</h4>
                        <p>框架基础</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-success" style="width: 85%">85%</div>
                        </div>
                        <p>权限管理</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-info" style="width: 70%">70%</div>
                        </div>
                        <p>业务开发</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-warning" style="width: 60%">60%</div>
                        </div>
                        <p>项目实战</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-danger" style="width: 40%">40%</div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="feature-box">
                                <h4 class="feature-title"><i class="fa fa-book"></i> 今日学习计划</h4>
                                <ol>
                                    <li>学习RuoYi框架的权限设计</li>
                                    <li>练习使用代码生成器</li>
                                    <li>完成用户管理模块的开发</li>
                                    <li>阅读Shiro安全框架文档</li>
                                </ol>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="feature-box">
                                <h4 class="feature-title"><i class="fa fa-lightbulb-o"></i> 学习笔记</h4>
                                <p>RuoYi框架是一个轻量级的后台管理系统脚手架，基于SpringBoot，集成了权限管理、代码生成等功能，非常适合快速开发企业应用。</p>
                                <p>目前正在学习如何利用代码生成器快速创建业务模块，大大提高了开发效率。</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-12">
                            <div class="feature-box">
                                <h4 class="feature-title"><i class="fa fa-cogs"></i> 技术架构</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <ul>
                                            <li><strong>核心框架：</strong>Spring Boot</li>
                                            <li><strong>安全框架：</strong>Apache Shiro</li>
                                            <li><strong>模板引擎：</strong>Thymeleaf</li>
                                            <li><strong>持久层框架：</strong>MyBatis</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <ul>
                                            <li><strong>定时任务：</strong>Quartz</li>
                                            <li><strong>数据库连接池：</strong>Druid</li>
                                            <li><strong>工具类：</strong>Fastjson</li>
                                            <li><strong>版本：</strong><span>v[[${version}]]</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-image-note">
                        <p><i class="fa fa-info-circle"></i> 当前使用的背景图片：<code>ruoyi-admin/src/main/resources/static/img/login-background.jpg</code></p>
                        <p>使用了系统自带的登录背景图片，您也可以替换为更适合学习平台的图片</p>
                    </div>
                </div>
            </div>
            
            <div class="footer">
                <p>RuoYi框架学习版本：<span>v[[${version}]]</span> | <a href="https://gitee.com/y_project/RuoYi" target="_blank"><i class="fa fa-github"></i> 查看源码</a> | <a href="http://ruoyi.vip" target="_blank"><i class="fa fa-book"></i> 学习文档</a></p>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</body>
</html> 